<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="plane-area" style="position:absolute; border:1px solid #ccc; width: 300px; height: 300px;">
        <div id="plane" style="position: absolute;left: 150px;  top: 250px; width: 30px; height: 30px; border: 1px solid #f00; border-radius: 50%;">
            <img src="./images/plane.jpg" alt="" style="display: block; width: 30px; height: 30px; border-radius: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;">
            <!-- <div id="zidan" style="background-color: #f00; height: 5px; width: 5px; border-radius: 50%; position: absolute; top: 0; left: 12.5px; display: none;"></div> -->
        </div>
        <!-- <div style="height: 30px; width: 30px; border-radius: 100%; background-color: blueviolet;"></div> -->
    </div>
</body>
</html>
<script src="./js/jquery-3.4.1.js"></script>
<script>
    var x1=0;
    var y1=0;
    var box = document.getElementById("plane-area");
    var btm = document.getElementById("plane");
    var zd_step = 50; //子弹每次移动的距离
    var bottom_step = 50; //底部浮台每次移动的距离
    var t;
    var count = 0;
    var rmcount = 0;
    document.onkeydown = function(event){
        if(event.keyCode ==13){
            var lz =parseInt(btm.style.left) + parseInt(btm.offsetWidth-4)/2;
            var tz = parseInt(btm.style.top);
            // console.log(tz);
            $("#plane-area").append(`<div id="zidan`+ count +`" style="background-color: #f00; height: 5px; width: 5px; border-radius: 50%; position: absolute; top:`+tz+`px ; left: `+lz+`px;"></div>`);
            // console.log(parseInt($("#zidan"+count).css('top')));
            t = setInterval(function(){
                var curr_top = parseInt($("#zidan"+count).css('top'));
                console.log(parseInt($("#zidan"+count).css('top')));  
                //console.log( parseInt($("#zidan"+count).css('top')) - zd_step);
                // $("#zidan"+count).css("top",curr_top);
                // if(parseInt($("#zidan"+count).css('top')) <= 0){
                //     clearInterval(t);
                //     $("#zidan"+rmcount).remove();
                //     rmcount++;
                // }
            }, 1000);
            count++;
        }
        if(event.keyCode == 37){
            // console.log("左");
            var maxBW = box.offsetWidth - btm.offsetWidth;
            x1 = parseInt(btm.style.left);
            if(x1 <= maxBW){
                x1 = x1 + (bottom_step*-1);
                btm.style.left = x1 +'px';
            }
            if(x1 < 0){
                x1 = 0;
                btm.style.left = x1 +'px';
            }
        }
        if(event.keyCode == 39){
            // console.log("右");
            var maxBW = box.offsetWidth - btm.offsetWidth;
            x1 = parseInt(btm.style.left);
            if(x1 < maxBW){
                x1 = x1 + (bottom_step*1);
                btm.style.left = x1 +'px';
            }
            if(x1 >= maxBW){
                x1 = maxBW - 1;
                btm.style.left = x1 +'px';
            }
        }
        if(event.keyCode == 38){ 
            var maxBH = box.offsetHeight - btm.offsetHeight;
            y1 = parseInt(btm.style.top);
            if(y1 <= maxBH){
                y1 = y1 + (bottom_step*-1);
                btm.style.top = y1 + "px";
            }
            if(y1 < 0){
                y1 = 0;
                btm.style.top = y1 +'px';
            }
        }
        if(event.keyCode == 40){
            var maxBH = box.offsetHeight - btm.offsetHeight;
            y1 = parseInt(btm.style.top);
            if(y1 < maxBH){
                y1 = y1 + (bottom_step*1);
                btm.style.top = y1 +'px';
            }
            if(y1 >= maxBH){
                y1 = maxBH - 1;
                btm.style.top = y1 +'px';
            }
        }
    }
    // function create(){
    //      var i = Math.floor(Math.random()*270);
    //     // console.log(i);
    //     $("#plane-area").append(`<div class="diji" style="height: 30px; width: 30px; border-radius: 100%; background-color: blueviolet; position: absolute; left:`+ i +`px;"></div>`);
        
    //     $(".diji").animate({top:"270px"},3000,function(){
    //             $(this).remove();
                
    //         });
            
    //        alert();
    // }
   
            
    // setInterval("create()",3000);
    // if(( (parseInt(btm.style.left) + parseInt(btm.offsetWidth-4)/2)< parseInt($(".diji").css('left'))+30)&& ((parseInt(btm.style.left) + parseInt(btm.offsetWidth-4)/2) > parseInt($(".diji").css('left')))){
    //             alert(parseInt($(".zidan").eq(0).css('top')) <= (parseInt($(".diji").css('top'))+30));
    //                 if(parseInt($(".zidan").eq(0).css('top')) <= (parseInt($(".diji").css('top'))+30)){
    //                     alert(1);
    //                     $(".zidan").remove();
    //                     $(".diji").remove();
    //                 }
    //         }
</script>